<template>
  <el-dialog :title="title" top="5vh" append-to-body :visible.sync="isFormShow"
    :width="Mobile == 'phone' ? '100%' : '65%'" :close-on-click-modal="false" :close-on-press-escape="false"
    :show-close="false" :style="{height: Mobile == 'phone' ? '660px' : '',overflow:'auto',paddingTop: '12vh'}">
    <!-- 搜索条件部分 -->
    <el-form ref="rulesForm" class="aform" :inline="true" :label-width="Mobile == 'phone' ? '70px' : ''">
      <el-form-item label="采购单号">
        <el-input size="small" v-model="SearchForm.procureNo" placeholder="请输入要搜索的采购单号" clearable @clear="GetDataList"></el-input>
      </el-form-item>
      <el-form-item label="sku">
        <el-input size="small" v-model="SearchForm.sku" placeholder="请输入要搜索的SKU" clearable @clear="GetDataList"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="GetDataList">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格部分 -->
    <el-table ref="table" :data="tableData" border :max-height="350" tooltip-effect="dark" size="mini" v-loading="loading">
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column label="采购单号" show-overflow-tooltip width="120px" prop="procure_no">
      </el-table-column>
      <el-table-column label="SKU" show-overflow-tooltip width="120px" prop="sku"></el-table-column>
      <el-table-column label="sku名称" show-overflow-tooltip min-width="150px" prop="ware_name"></el-table-column>
      <el-table-column label="入库数量" show-overflow-tooltip width="80px" prop="actual_num">
        <template v-slot="{row}">
          {{row.actual_num?row.actual_num:'0'}}
        </template>
      </el-table-column>
      <el-table-column label="入库价格" show-overflow-tooltip width="100px" prop="actual_price"></el-table-column>
      <!--<el-table-column label="创建时间" show-overflow-tooltip min-width="150px" prop="create_time"></el-table-column>-->
      <el-table-column label="采购价格" show-overflow-tooltip width="100px" prop="price"></el-table-column>
      <el-table-column label="库存剩余" show-overflow-tooltip width="80px" prop="surplus_num">
        <template v-slot="{row}">
          {{row.surplus_num?row.surplus_num:'0'}}
        </template>
      </el-table-column>
    </el-table>
    <template v-slot:footer>
      <span class="dialog-footer">
        <el-button size="small" type="primary" @click="closeModal">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {getProcureDetailList} from "@/api"; // 获取库存接口 关联运营订单接口
export default {
  props: {
    Mobile: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isFormShow: false, // 控制弹窗开关
      tableData: [], // 表格数据
      loading: true, // 表格加载
      SearchForm: {
        sku: "",
        procureNo: "",
      },
    };
  },
  methods: {
    // 获取列表接口
    GetDataList() {
      this.loading = true;
      let data = {
        procureNo: this.SearchForm.procureNo,
        sku: this.SearchForm.sku,
      }
      getProcureDetailList(data).then(res => {
        this.loading = false
        res.data.forEach(item=>{
          item.create_time = item.create_time.slice(0,19)
        })
        this.tableData = res.data
      }).catch(err=>{
        console.log(err)
        this.loading = false
      })
    },
    // 打开弹窗
    openModal(data) {
      this.isFormShow = true;
      this.SearchForm = {
        sku: data.sku?data.sku:'',
        procureNo: data.procureNo?data.procureNo:'',
      }
      this.GetDataList();
    },
    // 关闭弹窗
    closeModal() {
      this.$refs.rulesForm.resetFields();
      this.isFormShow = false;
    },
  },
};
</script>

<style scoped lang="less">
/deep/.el-dialog{
  margin:0 auto !important;
}
/deep/.el-dialog .el-dialog__body{
  overflow: auto;
  max-height:460px;
}
/deep/.el-dialog__header {
  border-bottom: 1px solid #DCDEE2;
}
/deep/.el-dialog__footer {
  border-top: 1px solid #DCDEE2;
  padding: 10px 20px;
}
.aform{
   /deep/.el-form-item {
    margin-bottom: 10px !important;
  }
}
/deep/ .el-table__header-wrapper .el-checkbox {
  display: none !important;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
}

::-webkit-scrollbar-thumb {
  background: #cfcfcf;
  border-radius: 10px;
}

.el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.el-table__body-wrapper,
.el-scrollbar__wrap {
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
}

.el-timeline-item__node--normal {
  width: 28px;
  height: 28px;
  left: -9px;
  border: 7px solid #fff;
}

.el-table__fixed,
.el-table__fixed-right {
  pointer-events: none;

  td {
    pointer-events: auto;
  }
}

/deep/ .el-table__row--level-1 {
  background-color: #ecf5ff !important;
  /* 设置突出显示的背景色 */
}
</style>
